<template>
  <div>
    <el-card class="card">
      <page-tools-top>
        <template #left>
          <div class="left">
            <span class="tag">关键字</span>
            <el-input
              v-model="obj.keyword"
              placeholder="请输入内容"
              class="inputSearch"
            />
            <span class="tag">状态</span>
            <el-select
              v-model="obj.state"
              placeholder="请选择"
              class="inputSearch"
            >
              <el-option label="启用" :value="1" />
              <el-option label="未启用" :value="0" />
            </el-select>
            <el-button size="small" @click="clearInput">清空</el-button>
            <el-button type="primary" size="small" @click="searchFn">
              搜索
            </el-button>
          </div>
        </template>
        <template #right>
          <el-button type="success" size="small" @click="addArticleFn('add')">
            新增技巧
          </el-button>
        </template>
      </page-tools-top>
      <page-tools>
        <template #left> 共 {{ total }} 条记录</template>
      </page-tools>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" />
        <el-table-column label="文章标题">
          <template #default="{ row }">
            <span>
              {{ row.title }}
            </span>
            <a
              v-if="row.videoURL"
              class="el-icon-film"
              href="#"
              style="color: #00f; font-size: 18px"
              @click.prevent="showVideoArea = true"
            />
            <div v-if="showVideoArea" class="videoArea">
              <div class="btn">
                <div class="el-icon-close" @click="showVideoArea = false" />
              </div>
              <div class="video">
                <video
                  :src="row.videoURL"
                  autoplay
                  style="width: 800px; height: 600px"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数" />
        <el-table-column prop="username" label="录入人" />
        <el-table-column label="录入时间">
          <template #default="{ row }">
            {{ row.createTime | formatTime('YYYY-MM-DD hh:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template #default="{ row }">
            {{ row.state === 1 ? '启用' : '未启用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="addArticleFn('preview', row.id)">
              预览
            </el-button>
            <el-button
              type="text"
              @click="changeState(row.id, row.state === 1 ? 0 : 1)"
            >
              {{ row.state ? '禁用' : '启用' }}
            </el-button>
            <el-button
              type="text"
              :disabled="!row.state"
              @click="addArticleFn('edit', row.id)"
            >
              修改
            </el-button>
            <el-button
              type="text"
              :disabled="!row.state"
              @click="delAritcleFn(row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <addDialog
      ref="addDialog"
      :dialog-form-visible.sync="dialogFormVisible"
      @updateArticle="getAritcleList"
    />
  </div>
</template>

<script>
import addDialog from './components/addDialog.vue'
import {
  getAritcleListApi,
  delAritcleApi,
  updateAritcleStateApi
} from '@/api/articles'

export default {
  components: {
    addDialog
  },
  data() {
    return {
      tableData: [],
      total: 0,
      dialogFormVisible: false,
      showVideoArea: false, // 显示隐藏视频播放区域
      page: 1, // 当前页数
      pagesize: 10, // 每页显示条数
      obj: {
        state: '', // 搜索框文章状态选择
        keyword: '' // 搜索框内容
      }
    }
  },
  created() {
    this.getAritcleList()
  },
  methods: {
    async getAritcleList(datas) {
      if (datas === undefined) {
        const obj = {
          page: this.page, // 当前页数
          pagesize: this.pagesize // 每页显示条数
        }
        const { data } = await getAritcleListApi(obj)
        this.total = data.counts
        this.tableData = data.items
      } else {
        const obj = {
          page: this.page, // 当前页数
          pagesize: this.pagesize // 每页显示条数
        }
        const { data } = await getAritcleListApi({
          ...obj,
          ...datas
        })
        this.total = data.counts
        this.tableData = data.items
      }
    },
    addArticleFn(val, id) {
      this.$refs.addDialog.openDialog(val, id)
      this.dialogFormVisible = true
    },
    async delAritcleFn(id) {
      this.$confirm('你确认要进行删除么?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delAritcleApi(id)
          if (this.tableData.length === 1 && this.page > 1) {
            this.page--
          }
          this.$message.success('删除操作成功')
          this.getAritcleList()
        })
        .catch((error) => {
          console.log(error)
        })
    },
    async changeState(id, state) {
      await updateAritcleStateApi(id, state)
      this.$message.success('更新成功')
      this.getAritcleList()
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.getAritcleList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getAritcleList()
    },
    searchFn() {
      const objs = {}
      for (const key in this.obj) {
        if (this.obj[key] || this.obj[key] === 0) {
          objs[key] = this.obj[key]
        }
      }
      console.log(objs)
      this.getAritcleList(objs)
    },
    clearInput() {
      this.obj.keyword = ''
      this.obj.state = ''
      this.getAritcleList()
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin: 20px;
  .left {
    display: flex;
    .tag {
      line-height: 38px;
      font-size: 14px;
      color: grey;
      margin-right: 8px;
    }
  }
  .inputSearch {
    width: 200px;
    margin-right: 10px;

    .el-input__inner {
      height: 32px;
    }
  }
  .videoArea {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 9999;
    .btn {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translate(-50%);
      background: rgba(0, 0, 0, 0.4);
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-size: 20px;
    }
    .video {
      width: 800px;
      height: 600px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
